<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>List-Style - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">list-style</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>]
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B5</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td align=center colspan=2><b class="alert">Other List-Style Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="markeroff.htm">marker-offset</a><br>
    <a href="lsposition.htm">list-style-position</a><br></td>
    <td valign=top><a href="lstype.htm">list-style-type</a><br>
    <a href="lsimage.htm">list-style-image</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td>[marker-type]: <b class="alert">disc</b>,
        [position]: <b class="alert">outside</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All elements with a default or assigned  <span class="property">display</span>
        property value of '<b class="alert">list-item</b>'</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>Yes</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>&lt;<b class="tagname">ul</b> <span class="tagattrib">TYPE</span>&gt; |
        &lt;<b class="tagname">ol</b> <span class="tagattrib">TYPE</span>&gt; |
        &lt;<b class="tagname">li</b> <span class="tagattrib">TYPE</span>&gt; </td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#list-style">CSS1: Sect 5.6.6</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/generate.html#lists">CSS2: Sect 12.6.2</a>,
        <a href="http://www.w3.org/TR/CSS21/generate.html#lists">CSS2.1: Sect 12.5.1</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This shorthand property is used when the author wishes to change the default
        display characteristics of list-markers in HTML list structures. An author
        can specify location of the marker, a graphic to be used and/or a standard
        set of symbols. Keywords may come in any order, but using multiple keywords
        that control the same behavior is not allowed. If a [list-style-image] is
        specified for the list marker, it will be used in place of any [list-style-type]
        also specified. Nevertheless, a [list-style-type] should always be specified
        in the event the [list-style-image] can not be loaded. A value of 'none' for
        the 'list-style' property should set both 'list-style-type' and
        'list-style-image' to 'none.'
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>]
    [<b><i class="fs">N6</i></b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">[list-style-type]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B5</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
     See the property page for '<a href="lstype.htm">list-style-type</a>'
  for more details on syntax and allowed values.</dd>

<dt><b class="subheading">[list-style-position]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B2</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        See the property page for '<a href="lsposition.htm">list-style-position</a>'
        for more details on syntax and allowed values.</dd>

<dt><b class="subheading">[list-style-image]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B2</i></b>|<b class="s">N6</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        See the property page for '<a href="lsimage.htm">list-style-image</a>'
        for more details on syntax and allowed values.</dd>
</dl>

<big><b class="mainheading">Syntax</b></big>
<dl>
    <dd><b class="selector">Selector</b> { <span class="property">list-style:</span>
        ( [<b class="alert2">list-style-type</b>] ||
        [<b class="alert2">list-style-position</b>] ||
        [<b class="alert2">list-style-image</b>] ) }<br>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="tagname">ul</b> { <span class="property">list-style:</span>
        square inside url(http://www.foo.com/bullet.gif) }</div>
    <dd><div class="example">In-Line: &lt;<b class="tagname">ul</b>&gt;&lt;<b class="tagname">li</b>
        <span class="tagattrib">STYLE</span>=&quot;<span class="property">list-style:</span>
        square inside<br>url(http://www.foo.com/bullet.gif)&quot;&gt;test
        text in the list item&lt;/<b class="tagname">li</b>&gt;&lt;/<b class="tagname">ul</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>All peculiarities listed for the sub-properties for this shorthand property
        (<a href="lstype.htm">list-style-type</a>, <a href="lsposition.htm">list-style-position</a>,
        <a href="lsimage.htm">list-style-image</a>) apply to this property as well.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>